<template>
  <div class="content-wrapper background_box">
    <headback :title="t('adminTime')" class="border_bottom"></headback>
    <div class="tab_warpper topHead">
      <van-tabs
        v-model:active="active"
        title-inactive-color="#eee"
        title-active-color="#fff"
      >
        <van-tab :title="t('fixedWay')" name="0">
          <template #title>
            <div>{{ t("fixedWay") }}</div>
            <div class="line_tab"></div>
          </template>
          <div
            class="address_item background_item light_border_shadow"
            v-for="item in store.state.fixedTime"
            :key="item.id"
          >
            <div class="address_left">
              <div class="left_line1">
                {{ item.name }} <span style="margin-left: 20px;" v-if="item.rate"> ({{ item.rate*10000/100 }} % )</span>
              </div>
              <div>
              </div>
            </div>
            <div class="payTypeRight">
              <div class="address_right">
                <van-icon
                  class="edit_icon"
                  @click="editType(item)"
                  name="edit"
                />
                <van-loading v-if="item.loading" class="del_icon" size="16" />
                <van-icon
                  v-else
                  class="del_icon"
                  @click="delPayType(item)"
                  name="delete"
                />
              </div>
              <div class="address_right">
                <van-button
                  :loading="item.loading3"
                  v-if="item.isActive"
                  @click.stop="setEnabled(item, false)"
                  type="primary"
                  >{{ t("stopIt") }}
                </van-button>
                <van-button
                  v-else
                  :loading="item.loading3"
                  @click.stop="setEnabled(item, true)"
                  type="primary"
                  >{{ t("openIt") }}</van-button
                >
              </div>
            </div>
          </div>
          <div class="fixedbutton" style="left: 0">
            <van-button @click="addNew" class="btn_shadow" type="primary">{{
              t("addTime")
            }}</van-button>
          </div>
        </van-tab>
        <van-tab :title="t('freeWay')" name="1" class="tab_box2">
            
            <div
            class="address_item background_item light_border_shadow"
            v-for="item in store.state.freeTime"
            :key="item.id"
          >
            <div class="address_left">
              <div class="left_line1">
                {{ item.name }} <span style="margin-left: 20px;" v-if="item.rate"> ({{ item.rate*10000/100 }} % )</span>
              </div>
              <div>
              </div>
            </div>
            <div class="payTypeRight">
              <div class="address_right">
                <van-icon
                  class="edit_icon"
                  @click="editType(item)"
                  name="edit"
                />
                <van-loading v-if="item.loading" class="del_icon" size="16" />
                <van-icon
                  v-else
                  class="del_icon"
                  @click="delPayType(item)"
                  name="delete"
                />
              </div>
              <div class="address_right">
                <van-button
                  :loading="item.loading3"
                  v-if="item.isActive"
                  @click.stop="setEnabled(item, false)"
                  type="primary"
                  >{{ t("stopIt") }}
                </van-button>
                <van-button
                  v-else
                  :loading="item.loading3"
                  @click.stop="setEnabled(item, true)"
                  type="primary"
                  >{{ t("openIt") }}</van-button
                >
              </div>
            </div>
          </div>
          <div class="fixedbutton" style="left: 0">
            <van-button @click="addNew" class="btn_shadow" type="primary">{{
              t("addTime")
            }}</van-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <van-popup
    v-model:show="show"
    closeable
    @close="closePop"
    position="bottom"
    round
  >
    <van-form @submit="onSubmit" class="top50">
      <van-cell-group inset>
        <van-field
          v-model="formData.name"
          :readonly="isDetail"
          :name="t('username')"
          :label="t('username')"
          :placeholder="t('username')"
        >
        </van-field>
        <van-field
          v-model="formData.day"
          :readonly="isDetail"
          type="digit"
          :name="t('duration')"
          :label="t('duration')"
          :placeholder="t('duration')"
          :rules="[{ required: true, message: t('pleaseWriteNumber') }]"
        />

        <div class="form_line van-field">
          <div class="lend_title">{{ t("way") }}</div>
          <van-radio-group
            v-model="formData.way"
            shape="square"
            direction="horizontal"
          >
            <van-radio name="0">{{ t("fixedWay") }}</van-radio>
            <van-radio name="1">{{ t("freeWay") }}</van-radio>
          </van-radio-group>
        </div>
        <van-field
          v-model="formData.rate"
          :readonly="isDetail"
          type="number"
          :name="t('minfee')"
          :label="t('minfee')"
          :placeholder="t('minfee')"
        >
          <template #button>
            <span class="unit_class"> %</span>
          </template>
        </van-field>
        <div class="form_line van-field">
          <div class="lend_title">{{ t("isActive") }}</div>
          <van-switch
            v-model="isActive"
            :label="1111"
            size="18px"
            :active-color="store.state.themeColor"
            inactive-color="#dcdee0"
          />
        </div>
      </van-cell-group>
      <div style="margin: 30px" v-if="!isDetail">
        <van-button
          round
          block
          type="primary"
          :loading="loading"
          class="btn_shadow"
          native-type="submit"
        >
          {{ t("confirm") }}
        </van-button>
      </div>
    </van-form>
  </van-popup>
</template>
<script setup>
import { showToast } from "vant";
import "vant/es/toast/style";
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import userEth from "@/utils/userEth.js";
import { useRouter } from "vue-router";
const router = useRouter();
const { locale, t } = useI18n();
const store = useStore();
const isDetail = ref(false);
const isActive = ref(true);
const closePop = () => {
  isDetail.value = false;
};
const active = ref(0)
const loading = ref(false);
const show = ref(false);
const formData = ref({
  name: "",
  day: "",
  way: "0",
  rate: "",
  isActive: true,
});
const editType = (item) => {
  formData.value.id = item.id;
  formData.value.name = item.name;
  formData.value.day = item.day;
  formData.value.way = item.way;
  formData.value.rate = item.rate*10000/100;
  formData.value.isActive = item.isActive;
  show.value = true;
};
const onSubmit = async (item) => {
  try {
    loading.value = true;
    let hex = {};
    let data = [
      formData.value.name,
      formData.value.day,
      formData.value.way,
      formData.value.rate*10000/100,
      formData.value.isActive
    ];
    if (formData.value.id) {
      data = [
        formData.value.id,
        formData.value.name,
        formData.value.day,
        formData.value.way,
        formData.value.rate*10000/100,
        formData.value.isActive
      ];
      // 修改
      hex = await userEth.ContractWithSinger.updateTime(...data);
    } else {
      hex = await userEth.ContractWithSinger.addTime(...data);
    }
    await hex.wait();
    loading.value = false;
    showToast(t("setSuccessful"));
    show.value = false;
    onLoad();
  } catch (err) {
    debugger
    showToast(t("setFail"));
    loading.value = false;
  }
};
const addNew = () => {
  formData.value = {
    name: "",
    day: "",
    way: active.value==1?'1':"0",
    rate: "",
    isActive: true,
  };
  show.value = true;
  loading.value = false;
};
const setEnabled = async (item, value) => {
  item.loading3 = true;
  try {
    let hex = await userEth.ContractWithSinger.setActive(item.id, value);
    await hex.wait();
    showToast(t("setSuccessful"));
    item.loading3 = false;
    item.enabled = value;
    auditSuccess();
  } catch (err) {
    item.loading3 = false;
    showToast(t("setFail"));
  }
};
const delPayType = async (item) => {
  item.loading = true;
  try {
    let hex = {};
    hex = await userEth.ContractWithSinger.deleteTime(item.id);
    await hex.wait();
    item.loading = false;
    showToast(t("delectSuccessful"));
    onLoad();
  } catch (err) {
    item.loading = false;
    showToast(t("delectFail"));
  }
};
const onLoad = async () => {
  try {
     userEth.getTimeList(0)
     userEth.getTimeList(1)
  } catch (err) {}
};
const auditSuccess = async () => {
  onLoad();
};
onLoad();
</script>

<style lang="scss" scoped>
.form_line {
  display: flex;
  align-items: center;
  .lend_title {
    padding: 0 24px 0 14px;
  }
}
.marl10 {
  margin-left: 10px;
}

.icon_uploader {
  :deep .van-uploader__upload {
    height: 40px;
    width: 40px;
  }

  :deep .van-uploader__preview-image {
    height: 40px;
    width: 40px;
  }
}

.form_item {
  display: flex;
  padding: 0 0 0 0.5rem;
  justify-content: space-between;
  align-items: center;

  .form_title {
    display: flex;
    align-items: center;
  }

  .line_h30 {
    line-height: 30px;
  }

  .form_content {
    flex: 1;
  }
}

.top50 {
  margin-top: 50px;
  margin-bottom: 30px;
}

:deep .van-cell__right-icon {
  font-size: 11px;
}

.cell_box :deep .van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.form_item {
  display: flex;
  align-items: center;
}

.van-button {
  padding: 0 5px;
  height: 28px;
  font-size: 0.34rem;
  border: none;
  border-radius: 20px;
  color: #fff;
}

.content-wrapper {
  .tab_warpper {
    padding: 1px 8px 0 8px;
    padding-bottom: 30px;

    .address_item {
      border-radius: 8px;
      margin: 8px 0;
      padding: 10px;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .token_icon {
        height: 40px;
        width: 40px;
        margin-right: 10px;
      }

      .address_left {
        flex: 1;

        .left_line1 {
          display: flex;
        }
      }

      .payTypeRight {
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .address_right {
        display: flex;
        align-items: center;

        .van-button {
          margin-left: 6px;
          height: 18px;
          padding: 0 5px;
          min-width: 40px;
          font-weight: 500;
          border-radius: 0.53333rem;
        }

        .van-button--primary {
          border: none;
          background: linear-gradient(140deg, #0b84fe, #0b84fe);
          font-size: 0.3rem;
          font-weight: 400;
          color: #fff;
        }

        .edit_icon {
          font-size: 16px;
          color: #eee;
          margin-right: 10px;
        }

        .del_icon {
          color: #fe4041;
          font-size: 16px;
        }
      }
    }
  }
}

:deep .van-tabs__wrap {
  height: 34px;
}

:deep .van-tabs__nav {
  background: $primary-color;
  border-radius: 10px 10px 0 0;
  padding: 2px;
  height: 32px;
}

.lineheight {
  height: 10px;
}

.tab_warpper {
  padding: 0;
}

:deep .van-tabs__nav .van-tab--active {
  background-size: 100% 100%;
  font-weight: 700;
}

:deep .van-tabs__nav .van-tab--active:nth-child(2) {
  background-size: 100% 100%;
  font-weight: 700;
}

:deep .van-tabs__nav .van-tabs__line {
  border-radius: 5px;
  width: 0px;
  bottom: 20px;
}

:deep .van-grid-item__content {
  background: transparent;
}

.tab_box2 {
  margin-top: 0;

  :deep .van-tabs__wrap {
    height: 34px;
  }

  :deep .van-tab {
    font-size: 12px;
  }

  :deep .van-tabs__nav {
    background: transparent !important;
    border-radius: 10px 10px 0 0;
    padding: 2px;
    height: 32px;
  }

  :deep .van-tabs__nav .van-tab--active {
    background-size: 100% 100%;
    font-weight: 700;
    color: #0b84fe;
  }

  :deep .van-tabs__nav .van-tabs__line {
    background-color: #0b84fe;
    border-radius: 5px;
    width: 0.6rem;
    bottom: 2px;
  }

  :deep .van-tabs__nav .van-tab--active {
    background: transparent !important;
    background-size: 100% 100%;
    font-weight: 700;
  }

  :deep .van-tabs__nav .van-tab--active:nth-child(2) {
    background: transparent !important;
    background-size: 100% 100%;
    font-weight: 700;
  }

  :deep .van-grid-item__content {
    background: transparent;
  }
}
</style>
